<template>
	<view class="pos-r">
		<view class="flex-r flex-start pos-r flex-fill" v-if="isbool(machine)">
			<view class="">
				<image @tap="viewPic(pic(machine.pic),[pic(machine.pic)])" class="wh25-25" mode="aspectFill" :src="pic(machine.pic)"></image>
				<status classes="w100 tac round1 padtb1 fs8" class="" :item="machine.status"></status>
			</view>
			<view class="flex1 padl3 fs8 lh2 c12 flex-c">
				<view class="fwb fs12 c11 flrc">
					<view class="flex1">{{machine.name}}</view>
					<view>#{{machine.id}}</view>
				</view>
				<view><text>型号：</text>{{machine.sn}}</view>
				<view><text>编码：</text>{{machine.code}}</view>
				<view class="flrc">

					<view class="flex1"><text>部门：</text>{{isnull(machine.department)?'未设置':machine.department.name}}</view>
					<view><text>操作人：</text>{{isnull(machine.operator)?'未设置':machine.operator.name}}</view>
				</view>
				<view class="flrc c12 bcf round3 fs8 flex1">
					<view class="padr2">{{isnull(machine.category)?'':machine.category.name}}</view>
					/
					<view class="padlr2">{{isnull(machine.groups)?'':machine.groups.name}}</view>
					/
					<view class="padl2">{{isnull(machine.mark)?'':machine.mark.name}}</view>
				</view>
			</view>
		</view>
		<view class="pad10" v-if="!isbool(machine)">
			<view class="pad10 bdda tac c12">无效的数据</view>
		</view>
		<view class="pos-a l0 r0 t0 b0 flcc bcaf4 c12" v-show="loading && !isbool(machine)">
			<text class="fa fa-spinner fa-spin fa-4x"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: '',
			item: '',
			itemId: '',
			iri: '',
			code: ''
		},
		data() {
			return {
				machine: '',
				ready: false,
				loading: false,
			}
		},
		methods: {
			getById(val) {
				this.loading = true
				this.$api.get("/api/machines/" + val, {}, res => {
					this.loading = false
					this.log(res)
					this.machine = res.d
				})
			},
			getByCode(code) {
				this.loading = true
				this.$api.get("/api/machines", {
					_where: {
						eq: {
							code
						}
					}
				}, res => {
					this.loading = false
					this.log(res)
					if (res.d.length == 1) {
						this.machine = res.d[0]
					} else {
						if (res.d.length == 0) {
							this.$com.showToast('未找到设备')
						} else {
							this.$com.showToast('检测到重复的编号，请管理后台核对')
						}
					}
				})
			},
			update() {
				if (this.isbool(this.item)) {
					this.machine = this.item
					return
				}
				if (this.isbool(this.itemId)) {
					this.log(this.itemId)
					this.getById(this.itemId)
					return
				}
				if (this.isbool(this.iri)) {
					this.getById(this.iri.split("/").pop())
					return
				}
				if (this.isbool(this.code)) {
					this.getByCode(this.code)
					return
				}
			}
		},
		created() {
			this.update()
		},
		mounted() {
			// #ifdef MP-WEIXIN || APP-PLUS
			if(this.isbool(this.value)) this.getById((this.value + '').split("/").pop())
			// #endif
			
		},
		watch: {
			itemId(val) {
				if (!this.$com.isbool(val)) return
				this.getById(val)
			},
			code(val) {
				if (!this.$com.isbool(val)) return
				this.getByCode(val)
			},
			value(val) {
				if (!this.$com.isbool(val)) return
				this.getById(val.split("/").pop())
			},
			iri(val) {
				if (!this.$com.isbool(val)) return
				this.getById(val.split("/").pop())
			},
			machine(machine) {
				if (!this.$com.isbool(machine)) return
				this.$emit('input', '/api_/machines/' + machine.id)
			}
		}
	}
</script>

<style>

</style>
